<script setup lang="ts">
import api from '@/api'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
const bannerList = ref<any[]>([])
// 获取轮播数据
const getListBanner = async() => {
  const {data} = await api.common.getBannerList('home')
  bannerList.value = data
  console.log(bannerList.value)
}
const list2= [{
  image: 'https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png',
  title: '昨夜星辰昨夜风，画楼西畔桂堂东',
},{
  image: 'localhost:8000/storage/default/20250320/图层4916f039a6740ea69ad9f4bc0b7f1c582e6e8ff4e4.png',
  title: '身无彩凤双飞翼，心有灵犀一点通'
},{
  image: 'http://localhost:8000/storage/default/20250320/图层4916f039a6740ea69ad9f4bc0b7f1c582e6e8ff4e4.png',
  title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
}];
onLoad(() => {
  getListBanner()
})
</script>


<template>
  <view class="container">
    <view class="banner">
      <up-swiper  class="swiper" height="600rpx" :list="bannerList" keyName="image" imgMode="scalceFill"></up-swiper>
    </view>
    <view class="content">
      <view class="entrance">
        <view class="item">
          <image src="/static/images/home/in.png" class="icon"></image>
          <view class="title">自取</view>
        </view>
        <view class="item">
          <image src="/static/images/home/out.png" class="icon"></image>
          <view class="title">外卖</view>
        </view>
      </view>

      <view class="info">
        <view class="integral_section">
          <view class="top">
            <text class="title">我的积分</text>
            <text class="value">201</text>
          </view>
          <view class="bottom">
            进入积分商城兑换券及周边好礼
            <view class="iconfont iconarrow-right"></view>
          </view>
        </view>
        <view class="qrcode_section">
          <image src="/static/images/home/qrcode.png"></image>
          <text>会员码</text>
        </view>
      </view>

      <view class="navigators">
        <view class="left">
          <view class="grid-box">
            <view class="u-flex p-10">
              <image src="/static/images/home/shop.png" class="mark-img"></image>
              <view class="font-size-sm title">商城</view>
            </view>
            <view class="text-color-assist">优质茶礼盒，网红零食</view>
          </view>
          <view class="grid-right">
            <image src="/static/images/home/shop_bg.png" class="yzclh-img" mode="heightFix"></image>
          </view>
        </view>
        <view class="right">
          <view class="tea-activity">
            <image src="/static/images/home/mcsb.png" class="mark-img"></image>
            <view>买茶送包</view>
            <view class="right-img">
              <image src="/static/images/home/mcsb_bg.png" mode="widthFix"></image>
            </view>
          </view>
          <view class="member-gifts">
            <image src="/static/images/home/hyjb.png" class="mark-img"></image>
            <view>会员劵包</view>
            <view class="right-img">
              <image src="/static/images/home/hyjb_bg.png" mode="widthFix"></image>
            </view>
          </view>
        </view>
      </view>
      <view class="member-news">
        <view class="header">
          <view class="title">会员新鲜事</view>
          <view class="iconfont iconRightbutton"></view>
        </view>
        <view class="list">
          <view class="item">
            <image src="https://img0.baidu.com/it/u=327569342,62525003&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=439"></image>
            <view class="title">"梅"你不行 | 霸气杨梅清爽回归</view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>


<style lang="scss" scoped>
.container {
  height: 100vh;
  .banner{
    height: 600rpx;
    background: #fff;
  }
}

.content {
  padding: 0 30rpx;
  padding-bottom: 200rpx;
}

.entrance {
  position: relative;
  margin-top: -80rpx;
  margin-bottom: 30rpx;
  border-radius: 10rpx;
  background-color: #ffffff;
  padding: 30rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    &:nth-child(1):after {
      content: '';
      position: absolute;
      width: 1rpx;
      background-color: #ddd;
      right: 0;
      height: 100%;
      transform: scaleX(0.5) scaleY(0.8);
    }

    .icon {
      width: 84rpx;
      height: 84rpx;
      margin: 20rpx;
    }

    .title {
      font-size: 30rpx;
      font-weight: 600;
    }
  }
}

.info {
  position: relative;
  margin-bottom: 30rpx;
  border-radius: 10rpx;
  background-color: #ffffff;

  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  .integral_section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .top {
      display: flex;
      align-items: center;
      color: $uni-text-color;
      font-size: $uni-font-size-base;

      .title {
        margin-right: 10rpx;
      }

      .value {
        font-size: 44rpx;
        font-weight: bold;
      }
    }

    .bottom {
      display: flex;
      align-items: center;
      font-size: $uni-font-size-sm;
      color: $uni-text-color-grey;
    }
  }

  .qrcode_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: $uni-font-size-sm;
    color: $uni-color-warning;

    image {
      width: 40rpx;
      height: 40rpx;
      margin-bottom: 10rpx;
    }
  }
}

.navigators {
  width: 100%;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  background-color: #ffffff;
  padding: 20rpx;
  display: flex;
  align-items: stretch;

  .left {
    width: 340rpx;
    margin-right: 20rpx;
    display: flex;
    padding: 0 20rpx;
    flex-direction: column;
    font-size: $uni-font-size-sm;
    color: $uni-text-color-grey;
    background-color: #F2F2E6;

    .grid-box {
      height: 50%;

      //display: flex;
      .title {
        color: $uni-text-color;
      }
    }
  }

  .right {
    width: 290rpx;
    display: flex;
    flex-direction: column;

    .tea-activity,
    .member-gifts {
      width: 100%;
      display: flex;
      padding: 20rpx;
      font-size: $uni-font-size-sm;
      color: $uni-text-color;
      align-items: center;
      position: relative;
    }

    .tea-activity {
      background-color: #FDF3F2;
      margin-bottom: 20rpx;
    }

    .member-gifts {
      background-color: #FCF6D4;
    }

    .right-img {
      flex: 1;
      position: relative;
      margin-left: 20rpx;
      margin-right: -20rpx;
      margin-bottom: -20rpx;
      display: flex;
      align-items: flex-end;

      image {
        width: 100%;
      }
    }
  }

  .mark-img {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
  }

  .grid-right {
    margin-right: 60rpx;
  }

  .yzclh-img {
    float: right;
    height: 122rpx;
    width: 214rpx;

  }
}

.member-news {
  width: 100%;
  margin-bottom: 30rpx;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;

    .title {
      font-size: $uni-font-size-lg;
      font-weight: bold;
    }

    .iconfont {
      font-size: 52rpx;
      color: $uni-text-color;
    }
  }

  .list {
    width: 100%;
    display: flex;
    flex-direction: column;

    .item {
      width: 100%;
      height: 240rpx;
      position: relative;

      image {
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
      }

      .title {
        position: relative;
        font-size: 32rpx;
        font-weight: 500;
        width: 100%;
        top: -70rpx;
        left: 16rpx;
        color: #ffffff;
      }
    }
  }
}
</style>